<template>
  <view class="content">
    <!-- <view
      class="page-hd common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img/3_jfs.png')})`
      }"
    ></view> -->

    <view class="sw-wrap">
      <swiper
        class="swiper-box"
        :autoplay="true"
        :indicator-dots="false"
        :circular="true"
        :interval="3000"
        @change="swChange"
      >
        <swiper-item class="sw-item" v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
          <view class="pic">
            <image class="yh_bg" :src="v.imgurl"></image>
          </view>
        </swiper-item>
      </swiper>

      <!-- <view
        v-if="advert.length && advert[swCur].title"
        class="pic-title c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc1.png')})`
        }"
      >
        <view class="title hang1">
          {{ advert[swCur].title }}
        </view>
      </view>

      <view class="sw-dot">
        <view
          class="sw-dot-item"
          v-for="(item, i) in advert"
          :key="i"
          :class="{
            act: swCur == i
          }"
        ></view>
      </view> -->
    </view>

    <view class="list">
      <view
        class="list-item c_bg"
        v-for="(item, i) in datas"
        :key="i"
        :style="{
          'background-image': `url(${$img('/static/img2/cc191.png')})`
        }"
        @click="items(item)"
      >
        <view class="pic">
          <image :src="item.imgurl" lazy-load></image>

          <view v-if="i < 2" class="new">
            <image :src="$img('/static/img2/cc197.png')" lazy-load></image>
          </view>

          <view
            class="type c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc203.png')})`
            }"
          >
            <text>{{ item.type_text }}</text>
          </view>
        </view>

        <view class="title hang1">
          {{ item.title }}
        </view>

        <!-- <view class="hot-num">
          <template v-if="item.join_count">
            {{ item.join_count }}次参与
          </template>

          <template v-else>快去参与吧</template>
        </view> -->

        <view class="price-box">
          <view class="price">
            <!-- ¥ -->
            <text>{{ item.price }}</text>
            分
          </view>

          <view class="num-box">
            <view class="num">{{ item.sale_stock }}/{{ item.stock }}</view>

            <view class="box icon">
              <image :src="$img('/static/img2/box.png')" lazy-load></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <tab-bar :index="1"></tab-bar>

    <!-- <view
      v-for="(item, index) in datas"
      class="items common_bg"
      :style="{
        'background-image': `url(${$img('/static/img/inf_list_border.png')})`
      }"
      @click="items(item, index)"
    >
      <view class="item_image">
        <image :src="item.imgurl" mode="aspectFill"></image>
      </view>
      <view class="gb_title" v-if="item.is_bao == 2"></view>
      <view class="dibuzhe">
        <view class="" style="display: flex; align-items: center">
          <view class="left">
            {{ item.title }}
          </view>
        </view>
        <view class="right">
          ￥
          <text style="font-size: 32rpx">{{ item.price }}</text>
        </view>
      </view>
    </view> -->
    <uni-popup ref="show" type="center">
      <view
        class="pop common_bg"
        :style="{
          'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`
        }"
      >
        <view class="pop_title">购买说明</view>
        <view class="pop_con">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view v-html="guize"></view>
          </scroll-view>
        </view>

        <image
          @click="$refs.show.close()"
          class="close"
          :src="$img('/static/icon/close.png')"
        ></image>
      </view>
    </uni-popup>
    <!-- <tab-bar :index="1"></tab-bar> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2 + 'wuxian/',
      z_imgPath1: this.$z_img2 + 'hegui/',
      list: ['无限赏', '魔晶令 '],
      current: 0,
      flga: false,
      datas: [],
      BarHeight: '',
      guize: '',
      advert: [],
      swCur: 0
    }
  },
  methods: {
    swChange(e) {
      this.swCur = e.detail.current
    },

    getnews() {
      let that = this
      that.req({
        url: 'index',
        success(res) {
          if (res.status == 1) {
            that.advert = res.data.advert
          }
        }
      })
    },

    items(item) {
      this.$c.to({
        url: '/pages/shouye/detail',
        query: {
          goods_id: item.id,
          type_text: '积分赏'
        }
      })
    },
    getlist(index) {
      this.current = index
      if (index == 1) {
        uni.navigateTo({
          url: 'UnlimitedOrder'
        })
      }
    }
  },
  onShow() {
    this.current = 0
    this.getnews()
  },
  onLoad() {
    let that = this
    that.req({
      url: 'goods',
      data: {
        type: '5',
        page: 1
      },
      success(res) {
        that.datas = res.data.data
      }
    })
    // that.req({
    //   url: 'danye',
    //   data: {
    //     type: 4
    //   },
    //   success: function (res) {
    //     that.guize = res.data
    //   }
    // })
    uni.getSystemInfo({
      success: function (res) {
        that.BarHeight = res.statusBarHeight
      }
    })
  }
}
</script>

<style lang="scss">
.activeImg {
  position: absolute;
  width: 32rpx !important;
  height: 16rpx !important;
  bottom: -20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.sw-wrap {
  width: 100%;
  height: 440rpx;
  position: relative;

  .swiper-box {
    width: 100%;
    height: 100%;

    .sw-item {
      .pic {
        width: 100%;
        height: 100%;
        position: relative;

        .yh_bg {
          width: 100%;
          height: 100%;
          border-radius: inherit;
        }
      }
    }
  }

  // .pic-title {
  //   width: 100%;
  //   height: 104rpx;
  //   box-sizing: border-box;
  //   position: absolute;
  //   left: 0;
  //   bottom: -46rpx;
  //   z-index: 1;
  //   padding-top: 10rpx;
  //   padding-left: 30rpx;
  //   padding-right: 200rpx;

  //   .title {
  //     font-family: 光良酒-干杯体, 光良酒-干杯体;
  //     font-weight: 400;
  //     font-size: 40rpx;
  //     color: #ffffff;
  //     text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
  //   }
  // }

  // .sw-dot {
  //   display: flex;
  //   justify-content: center;
  //   position: absolute;
  //   right: 30rpx;
  //   bottom: 10rpx;
  //   z-index: 2;

  //   .sw-dot-item {
  //     width: 8rpx;
  //     height: 8rpx;
  //     border-radius: 8rpx;
  //     background: #ff9f9f;
  //     margin: 0 4rpx;
  //     transition: 0.3s;

  //     &.act {
  //       width: 28rpx;
  //       background-color: #fff;
  //     }
  //   }
  // }
}

.pop {
  width: 607rpx;
  // height: 904rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  position: relative;

  .pop_title {
    font-size: 36rpx;
    font-family: zihun152hao-jijiachaojihei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }

  .pop_con {
    padding: 30rpx 40rpx 50rpx;
    box-sizing: border-box;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 42rpx;
  }

  .close {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: 50rpx;
    height: 50rpx;
  }
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.fixed {
  width: 750rpx;
  padding: 30rpx;
  box-sizing: border-box;
  position: fixed;
  top: 0rpx;
  z-index: 15;
}

.header-left-title {
  width: 104rpx;
  height: 33rpx;
}

.image1 {
  width: 117rpx;
  height: 46rpx;
  background: url('https://baoku.languowangluo.cn/newindex/new.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 23rpx;
  left: 18rpx;
}

.gb_title {
  width: 118rpx;
  height: 46rpx;
  position: absolute;
  top: 18rpx;
  right: 18rpx;
  background: url('https://baoku.languowangluo.cn/newindex/infinite_goods_shang_bao.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.qiehuan_left {
  display: flex;
  font-family: 'YouSheBiaoTiHei';
  /* border-top: 2rpx solid #333333; */
  margin-left: 30rpx;
  /* text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7); */
  /* 	font-family: 'zcq'; */
}
.wzs {
  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #9c9c9c;
}
.xzs {
  font-size: 32rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 0 10rpx #ba39ff;
}
.qiehuan_left > view {
  margin-right: 70rpx;
  position: relative;
}

.dibuzhe {
  background: rgba(0, 0, 0, 0.8);
  // background: #f00;
  display: flex;
  justify-content: space-between;
  /* padding-top:5rpx; */
  position: absolute;
  width: calc(100% - 16rpx - 16rpx);
  left: 16rpx;
  bottom: 16rpx;
  height: 74rpx;
  align-items: center;
  border-radius: 0 0 20rpx 20rpx;
  box-sizing: border-box !important;
}

.left {
  width: 400rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 22rpx;
  /* font-family: 'zcq';
		text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7); */
}

.gb {
  color: #ffffff;
  /* font-family: 'zcq';
		text-shadow: 0px 0px 14rpx red; */
}

.right {
  font-size: 28rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 0 10rpx #22aeff;
  padding-right: 20rpx;
}

.items {
  width: 714rpx;
  height: 504rpx;
  padding: 16rpx;
  margin: 30rpx auto 0;
  position: relative;

  box-sizing: border-box;
}

/deep/ .u-tab-item {
  color: #222222 !important;
}

.baibei {
  width: 720rpx;
  height: 78rpx;
  /* background: #FFFFFF; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* font-family: 'zcq'; */
}

.content {
  width: 100vw;
  min-height: 100vh;
  /* padding-top: 1rpx; */
  padding-bottom: 100rpx;
  box-sizing: border-box;
  background: #000000;
}

.item_image {
  width: 100%;
  height: 472rpx;
  // margin: 17rpx auto 0;
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
}

.item_image image {
  width: 100%;
  height: 100%;
}

// .page-hd {
//   width: 100%;
//   height: 400rpx;
// }

.list {
  padding: 1rpx 30rpx 30rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  .list-item {
    width: 330rpx;
    margin-top: 30rpx;
    padding: 1rpx 0 0;

    .pic {
      margin: 20rpx auto 0;
      width: 310rpx;
      height: 310rpx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
      }

      .new {
        position: absolute;
        width: 106rpx;
        height: 40rpx;
        z-index: 1;
        left: 0;
        top: 0;
      }

      .type {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        padding: 0 16rpx;
        box-sizing: border-box;
        min-width: 90rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 26rpx;
          color: #ffffff;
          text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
      }
      .common_bg {
      }
    }

    .title {
      padding: 20rpx 20rpx 0;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
    .hang1 {
    }

    .hot-num {
      padding: 10rpx 20rpx 0;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #cccccc;
    }

    .price-box {
      padding: 10rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #e40d1d;

        // text {
        //   font-size: 36rpx;
        // }
      }

      .num-box {
        display: flex;
        align-items: center;

        .num {
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cccccc;
        }

        .box {
          width: 26rpx;
          height: 26rpx;
          margin-left: 6rpx;
        }
        .icon {
        }
      }
    }
  }
}
</style>
